<!DOCTYPE html>
<!-- This is a regression test for http://crbug.com/415106. It exercises partially repainting an element with background-image and a CSS filter to ensure that the background-image is not clipped at record time, and is instead clipped (correctly) at playback time (to accommodate filter outsets).-->
<!-- You should see a 50x50 green box over a blurred background, with no white 100x100 box bleeding into the background image.-->
<html>
<head>
<script>
  if (window.testRunner) {
    testRunner.dumpAsTextWithPixelResults();
    testRunner.waitUntilDone();
  }
  function runTest() {
    function shrinkBox() {
      var box = document.getElementsByClassName("box")[0];
      box.style.width = "50px";
      box.style.height = "50px";
      if (window.testRunner) {
        testRunner.notifyDone();
      }
    }
    if (window.testRunner) {
      testRunner.displayAsyncThen(shrinkBox);
    } else {
      setTimeout(shrinkBox, 500);
    }
  }
</script>
<style>
.bg {
  position: absolute;
  left:   200px;
  top:    0px;
  width:  400px;
  height: 300px;
  background-image: url(resources/reference.png);
  -webkit-filter: blur(8px);
}
.box {
  position: absolute;
  left:   300px;
  top:    50px;
  width:  100px;
  height: 100px;
  background-color: green;
}
</style>
</head>
<body onload="runTest()">
<div class="bg"></div>
<div class="box"></div>
</body>
</html>
